<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-button
        type="primary"
        @click="
          add
          
        "
        >添加数据</el-button
      >
      <!-- 表格 -->
      <Table
        @change="getdata"
        :cols="cols"
        :data="list"
        v-model="queryModel"
        row-key="cat_id"
      >
        <template v-slot:button="{ row }">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-check"
            circle
          ></el-button>
        </template>
        <template v-slot:cat_level="{ row: { cat_level: level } }">
          <el-tag :type="colors[level]">{{ levels[level] }}级</el-tag>
        </template>
        <template v-slot:action="{ row }">
          <button
            data-v-46569972=""
            type="button"
            class="el-button el-button--default el-button--mini"
            @click="
              visible = true;
              addClassModel = { ...row };
            "
          >
            <!----><i class="el-icon-edit"></i><span>编辑</span>
          </button>
          <button
            data-v-46569972=""
            type="button"
            class="el-button el-button--danger el-button--mini"
            @click="delent(row)"
          >
            <!----><i class="el-icon-delete"></i><span>删除</span>
          </button>
        </template>
      </Table>

      <!-- 弹出框 -->
      <!-- 弹出框 -->
      <el-dialog :title="title + '分类'" :visible.sync="visible">
        <el-form :rules="rules" ref="form" :model="addClassModel">
          <el-form-item label="分类名称" prop="cat_name" label-width="80px">
            <el-input v-model="addClassModel.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类" prop="cat_pid" label-width="80px">
            <el-cascader
              @change="StateChange"
              :options="data"
              placeholder="请选择"
              v-model="model"
              :props="{
                value: 'cat_id',
                label: 'cat_name',
                children: 'children',
                expandTrigger: 'hover',
              }"
            ></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addd">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryModel.pagenum"
        :page-sizes="[10, 20, 30, 40, 50, 60, 70]"
        :page-size="queryModel.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import Table from "@/components/Table.vue";
import { getList } from "@/api/api";
import {
  deleteAttrbutes,
  getCategories,
  getCategoriesAdd,
  updata,
} from "@/api/goods";
export default {
  components: { Table },
  data() {
    return {
      selectedKeys: [],
      data: [],
      model: {},
      //正则
      rules: {
        cat_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
      },
      visible: false,
      levels: ["一", "二", "三"],
      colors: ["", "success", "warning"],
      //分页
      total: 0,
      queryModel: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      addClassModel: {
        cat_name: "",
        cat_pid: 1,
        cat_level: 0,
      },
      //数据
      list: [],
      //列
      cols: [
        {
          title: "序号",
          type: "index",
          width: 200,
        },
        {
          title: "分类名称",
          name: "cat_name",
          width: 230,
        },
        {
          title: "是否有效",
          slot: "button",
          width: 230,
        },
        {
          title: "分类排序",
          slot: "cat_level",
          width: 230,
        },
        {
          title: "操作",
          slot: "action",
          width: 300,
        },
      ],
    };
  },
  created() {
    this.getdata();
  },
  computed: {
    title() {
      return this.addClassModel.cat_pid ? "添加" : "修改";
    },
  },
  methods: {
    // 添加分类彈框
    async add() {
      this.visible = true;
      const res = await getCategories({ params: { type: 2 } });
      this.addClassModel = {}
      console.log(res, "165");
      this.data = res.data;
    },
    // change事件
    StateChange() {
      if (this.selectedKeys.length > 0) {
        this.addClassModel.cat_pid =
          this.selectedKeys[this.selectedKeys.length - 1];
        this.addClassModel.cat_level = this.selectedKeys.length;
      } else {
        this.addClassModel.cat_pid = 0;
        this.addClassModel.cat_level = 0;
      }
    },
    //提交
    async addd() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        await (this.title ? getCategoriesAdd : updata)(
          this.addClassModel
        );
        this.$message.success((this.title ? "添加" : "编辑") + "成功");
        this.getdata();
        this.addClassModel = {};
        this.model = {};
        this.visible = false;
      });
    },
    //删除
    async delent(cat_id) {
      try {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let res = await deleteAttrbutes(cat_id);
            console.log(res, "1");
            this.getdata();
            this.$message.success("删除成功");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } catch (error) {}
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryModel.pagesize = val;
      this.getdata();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryModel.pagenum = val;
      this.getdata();
    },
    async getdata() {
      const res = await getList(this.queryModel);
      this.total = res.data.total;
      this.list = res.data.result;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-card {
  margin-top: 15px;
}
</style>